<template>
  <div class="py-6">
    <div class="mb-6">
      <button @click="$router.back()" class="flex items-center text-sm font-medium text-primary hover:text-primary-dark mb-4">
        <i class="fa fa-arrow-left mr-1"></i> 返回工单列表
      </button>
      <h1 class="text-2xl font-bold text-gray-900">工单详情 #TKT-20230805-002</h1>
    </div>

    <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
      <!-- 工单信息 -->
      <div class="lg:col-span-2">
        <div class="bg-white shadow overflow-hidden sm:rounded-lg mb-6">
          <div class="px-4 py-5 sm:px-6">
            <h2 class="text-lg leading-6 font-medium text-gray-900">工单信息</h2>
          </div>
          <div class="border-t border-gray-200">
            <dl>
              <div class="bg-gray-50 px-4 py-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6">
                <dt class="text-sm font-medium text-gray-500">工单标题</dt>
                <dd class="mt-1 text-sm text-gray-900 sm:mt-0 sm:col-span-2">软件安装请求</dd>
              </div>
              <div class="bg-white px-4 py-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6">
                <dt class="text-sm font-medium text-gray-500">工单号</dt>
                <dd class="mt-1 text-sm text-gray-900 sm:mt-0 sm:col-span-2">TKT-20230805-002</dd>
              </div>
              <div class="bg-gray-50 px-4 py-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6">
                <dt class="text-sm font-medium text-gray-500">提交时间</dt>
                <dd class="mt-1 text-sm text-gray-900 sm:mt-0 sm:col-span-2">2023-08-05 14:15</dd>
              </div>
              <div class="bg-white px-4 py-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6">
                <dt class="text-sm font-medium text-gray-500">问题分类</dt>
                <dd class="mt-1 text-sm text-gray-900 sm:mt-0 sm:col-span-2">软件安装</dd>
              </div>
              <div class="bg-gray-50 px-4 py-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6">
                <dt class="text-sm font-medium text-gray-500">优先级</dt>
                <dd class="mt-1 text-sm text-gray-900 sm:mt-0 sm:col-span-2">
                  <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-yellow-100 text-yellow-800">
                    中
                  </span>
                </dd>
              </div>
              <div class="bg-white px-4 py-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6">
                <dt class="text-sm font-medium text-gray-500">当前状态</dt>
                <dd class="mt-1 text-sm text-gray-900 sm:mt-0 sm:col-span-2">
                  <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-yellow-100 text-yellow-800">
                    处理中
                  </span>
                </dd>
              </div>
              <div class="bg-gray-50 px-4 py-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6">
                <dt class="text-sm font-medium text-gray-500">处理人员</dt>
                <dd class="mt-1 text-sm text-gray-900 sm:mt-0 sm:col-span-2">张三（技术支持）</dd>
              </div>
              <div class="bg-white px-4 py-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6">
                <dt class="text-sm font-medium text-gray-500">问题描述</dt>
                <dd class="mt-1 text-sm text-gray-900 sm:mt-0 sm:col-span-2">
                  需要安装Adobe Photoshop CC 2023版本，用于设计工作。请尽快安装。
                </dd>
              </div>
            </dl>
          </div>
        </div>

        <!-- 回复记录 -->
        <div class="bg-white shadow sm:rounded-lg">
          <div class="px-4 py-5 sm:px-6">
            <h2 class="text-lg leading-6 font-medium text-gray-900">回复记录</h2>
          </div>
          <div class="border-t border-gray-200">
            <ul class="divide-y divide-gray-200">
              <li class="px-4 py-4 sm:px-6">
                <div class="flex items-center">
                  <div class="flex-shrink-0">
                    <img class="h-10 w-10 rounded-full" src="https://picsum.photos/id/1006/40/40" alt="处理人员">
                  </div>
                  <div class="ml-3">
                    <p class="text-sm font-medium text-gray-900">张三（技术支持）</p>
                    <p class="text-sm text-gray-500">2023-08-05 15:30</p>
                  </div>
                  <div class="ml-auto">
                    <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-blue-100 text-blue-800">
                      处理人员
                    </span>
                  </div>
                </div>
                <div class="mt-2 ml-13">
                  <p class="text-sm text-gray-700">收到您的请求，正在为您安装软件，请稍候。</p>
                </div>
              </li>
              <li class="px-4 py-4 sm:px-6">
                <div class="flex items-center">
                  <div class="flex-shrink-0">
                    <img class="h-10 w-10 rounded-full" src="https://picsum.photos/id/1005/40/40" alt="客户">
                  </div>
                  <div class="ml-3">
                    <p class="text-sm font-medium text-gray-900">客户</p>
                    <p class="text-sm text-gray-500">2023-08-05 14:15</p>
                  </div>
                  <div class="ml-auto">
                    <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-green-100 text-green-800">
                      客户
                    </span>
                  </div>
                </div>
                <div class="mt-2 ml-13">
                  <p class="text-sm text-gray-700">需要安装Adobe Photoshop CC 2023版本，用于设计工作。请尽快安装。</p>
                </div>
              </li>
            </ul>
          </div>
          
          <!-- 回复表单 -->
          <div class="border-t border-gray-200 p-4 sm:p-6">
            <form>
              <div>
                <label for="reply" class="block text-sm font-medium text-gray-700">添加回复</label>
                <div class="mt-1">
                  <textarea id="reply" rows="3" class="shadow-sm focus:ring-primary focus:border-primary block w-full sm:text-sm border-gray-300 rounded-md" placeholder="请输入您的回复内容"></textarea>
                </div>
              </div>
              <div class="mt-3 flex justify-end">
                <button type="submit" class="inline-flex justify-center py-2 px-4 border border-transparent shadow-sm text-sm font-medium rounded-md text-white bg-primary hover:bg-primary-dark focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary">
                  提交回复
                </button>
              </div>
            </form>
          </div>
        </div>
      </div>

      <!-- 右侧操作栏 -->
      <div>
        <div class="bg-white shadow sm:rounded-lg mb-6">
          <div class="px-4 py-5 sm:p-6">
            <h3 class="text-lg leading-6 font-medium text-gray-900">工单操作</h3>
            <div class="mt-4 space-y-3">
              <button class="w-full inline-flex justify-center items-center px-4 py-2 border border-gray-300 shadow-sm text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary">
                <i class="fa fa-refresh mr-2"></i>刷新状态
              </button>
              <button class="w-full inline-flex justify-center items-center px-4 py-2 border border-gray-300 shadow-sm text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary">
                <i class="fa fa-print mr-2"></i>打印工单
              </button>
              <button class="w-full inline-flex justify-center items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-red-600 hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500">
                <i class="fa fa-times-circle mr-2"></i>关闭工单
              </button>
            </div>
          </div>
        </div>

        <div class="bg-white shadow sm:rounded-lg">
          <div class="px-4 py-5 sm:p-6">
            <h3 class="text-lg leading-6 font-medium text-gray-900">附件</h3>
            <div class="mt-4">
              <ul class="divide-y divide-gray-200">
                <li class="py-2">
                  <div class="flex items-center">
                    <i class="fa fa-file-pdf-o text-red-500 mr-2"></i>
                    <span class="text-sm font-medium text-gray-900 truncate">requirements.pdf</span>
                    <a href="#" class="ml-auto text-sm font-medium text-primary hover:text-primary-dark">下载</a>
                  </div>
                </li>
              </ul>
              <button class="mt-4 w-full inline-flex justify-center items-center px-4 py-2 border border-gray-300 shadow-sm text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary">
                <i class="fa fa-paperclip mr-2"></i>添加附件
              </button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
</script>